<template>
  <div class="passRemark">
    <el-dialog
      title="备注"
      :visible.sync="isVisible"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      width="38%"
      center
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="兑换码" prop="cdk">
          <el-input
            v-model="ruleForm.cdk"
            placeholder="请输入CDK兑换码，不要输入除CDK兑换码以外的任意字符，如多个CDK则用大写，分开"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item class="textspan">
          <p>该用户满足CDK档位：<span v-for="(item,index) in this.dialogRow" :key='index'>{{item}}元，</span>请按对应档位发放</p>
          <p>此处是给玩家发送CDK的唯一入口，请保证CDK的真实及完整性，避免不必要的纠纷。</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >通过审批</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { operateApply } from "@/api/eventManage";
export default {
  name: "applyDetail",
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      ruleForm: {
        cdk: "",
      },
      rules: {
        cdk: [{ required: true, message: "请输入CDK兑换码", trigger: "blur" }],
      },
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Array,
    id:Number
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = Object.assign(
            {},
            {
              apply_id: this.id,
              status: 1,
              remarks: this.ruleForm.cdk,
            }
          );
          operateApply(para).then((res) => {
            this.$message({
              message: "通过成功",
              type: "success",
            });
            setTimeout(() => {
              this.reload();
            }, 20);
            this.isVisible = false;
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.passRemark {
  .el-input {
    width: 270px;
  }
  .el-dialog__wrapper .el-button {
    padding: 10px 25px;
    font-size: 13px;
  }
  .textspan {
    color: #409EFF;
    margin-top: 30px;
    .el-form-item__content {
      line-height: 20px;
      font-size: 13px;
    }
    span{
      color: #f00;
    }
  }
  .el-textarea__inner,
  .el-textarea {
    width: 440px;
    height: 132px;
  }
  .el-textarea__inner {
    resize: none;
  }
  .cell {
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 5px 6px !important;
    }
  }
}
</style>